<template>
  <div class="wantBuy-step">
    <u-gap height="15"></u-gap>
    <view class="title">{{ $t('locales.goodsInfo') }}</view>
    <u-form
      :model="form"
      ref="uForm"
      :label-style="{ color: '#545454', fontWeight: 400 }"
      label-width="180"
    >
      <u-form-item :label="$t('locales.goodsName')" prop="goodsName" required>
        <u-input v-model="form.goodsName" :placeholder="$t('locales.blur') + $t('locales.goodsName')" :maxlength="200" />

        <view
          slot="right"
          style="padding-left: 40rpx; padding-right: 40rpx"
          @click="navSwitch('/pages/wantBuy/template')"
        >
          <u-icon name="search" color="#999" size="40"></u-icon>
        </view>
      </u-form-item>
      <u-form-item :label="$t('locales.label')" prop="label" required>
        <u-input v-model="form.label" :placeholder="$t('locales.labelPlaceholder')" :maxlength="36" />
      </u-form-item>
      <u-form-item :label="$t('locales.commodityBrand')" prop="brandName">
        <u-input v-model="form.brandName" :placeholder="$t('locales.blur') + $t('locales.commodityBrand')" :maxlength="20" />
      </u-form-item>
      <u-form-item :label="$t('locales.unit')" prop="unit" required>
        <u-input v-model="form.unit" :placeholder="$t('locales.unitPlaceholder')" :maxlength="5" />
      </u-form-item>
      <u-form-item :label="$t('locales.skuFormat')" prop="specificationsName" required>
        <u-input
          :maxlength="20"
          v-model="form.specificationsName"
          :placeholder="$t('locales.skuPlaceholder')"
        />
      </u-form-item>
      <u-form-item :label="$t('locales.manufactor')" prop="manufacturer">
        <u-input v-model="form.manufacturer" :placeholder="$t('locales.blur') + $t('locales.manufactor')" :maxlength="30" />
      </u-form-item>
      <u-form-item :label="$t('locales.goodsImg')" prop="picUrlList">
        <u-upload
          :show-progress="false"
          custom-btn
          width="120"
          height="120"
          max-count="5"
          :max-size="3145728"
          :action="baseUrls + '/file/upload'"
          :file-list="form.fileList"
          del-bg-color="#999"
          @on-success="uploadSuccess"
          @on-remove="uploadRemove"
          @on-choose-complete="uploadComplete"
          @on-error="uploadError"
          @on-oversize="oversize"
        >
          <view slot="addBtn" class="addBtn">
            <u-icon name="plus" color="#ccc" size="40"></u-icon>
          </view>
        </u-upload>
      </u-form-item>
      <u-form-item :label="$t('locales.packing')" prop="packingRequirement">
        <u-input
          type="textarea"
          v-model="form.packingRequirement"
          :placeholder="$t('locales.blur') + $t('locales.packing')"
          :maxlength="200"
          :custom-style="{
            background: '#FAFAFA',
            padding: '10rpx'
          }"
        />
      </u-form-item>
      <u-form-item :label="$t('locales.goodsDescription')" prop="description">
        <u-input
          type="textarea"
          v-model="form.description"
          :placeholder="$t('locales.blur') + $t('locales.goodsDescription')"
          :maxlength="300"
          :custom-style="{
            background: '#FAFAFA',
            padding: '10rpx'
          }"
        />
      </u-form-item>
    </u-form>
    <SubmitBtn :fixed="false" @click="submit" :text="$t('locales.nextStep')" />
  </div>
</template>
<script>
import { baseUrl } from '@/config'
import SubmitBtn from '@/components/submitBtn'
export default {
  components: {
    SubmitBtn
  },
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    const required = {
      required: true,
      message: this.$t('locales.notNull'),
      trigger: ['blur']
    }

    return {
      baseUrls: baseUrl(),
      form: {
        goodsName: '',
        label: '',
        brandName: '',
        unit: '',
        specificationsName: '',
        manufacturer: '',
        mainPic: '',

        picList: [],
        picUrlList: [],
        fileList: [],

        packingRequirement: '',
        description: ''
      },
      rules: {
        goodsName: [required],
        label: [
          required,
          {
            validator: (_, value) => {
              const reg = /^[\u4E00-\u9FA5A-Za-z0-9,，、]+$/
              return reg.test(value)
            },
            message: this.$t('locales.labelFormat'),
            trigger: ['blur']
          }
        ],
        unit: [required],
        specificationsName: [required]
      }
    }
  },

  created() {

  },

  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(val) {
        console.log(val)
        Object.keys(this.form).forEach((key) => {
          this.form[key] = val[key]
        })
        this.$nextTick(() => {
          this.$refs.uForm.setRules(this.rules)
        })
      }
    }
  },

  methods: {
    // 图片选择完成
    uploadComplete() {
      uni.showLoading({
        mask: true
      })
    },
    // 图片上传完成
    uploadSuccess(data) {
      if (data.code === 200) {
        // 决绝数组拷贝的问题
        this.form.picList = [...this.form.picList, data.data.objectName]
        this.form.picUrlList = [...this.form.picUrlList, data.data.accessUrl]
      }

      uni.hideLoading()
    },
    // 图片上传失败
    uploadError() {
      uni.hideLoading()
    },
    // 超出大小
    oversize() {
      uni.showModal({
        content: this.$t('locales.overstep'),
        confirmColor: '#0049AC',
        showCancel: false
      })
    },

    // 移除图片
    uploadRemove(index) {
      this.form.picList.splice(index, 1)
      this.form.picUrlList.splice(index, 1)
    },

    navSwitch(url) {
      uni.navigateTo({
        url
      })
    },

    submit() {
      this.$refs.uForm.validate((valid) => {
        if (!valid) return

        if (this.form.picList.length > 0) {
          this.form.mainPic = this.form.picList[0]
        }

        this.form.fileList = this.form.picUrlList.map((item, index) => {
          return {
            url: item,
            objectName: this.form.picList[index]
          }
        })

        this.$emit('change', this.form)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.wantBuy-step {
  .u-form {
    padding: 0 30rpx;
    background-color: #fff;
    .u-form-item--left__content__label {
      color: #545454;
    }
  }
  .title {
    line-height: 90rpx;
    padding: 0 30rpx;
    background-color: #fff;
    border-bottom: 1px solid #e3e6ed;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #212121;
  }
  .addBtn {
    margin: 10rpx;
    width: 120rpx;
    height: 120rpx;
    border-radius: 10rpx;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
